@import '~@teambit/ui.constants.z-indexes/z-indexes.module.scss';

$animationTime: 300ms;
$header-height: 56px;
$bottom-margin: 8px;

.notificationCenter {
  position: fixed;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-height: calc(100vh - #{$header-height + $bottom-margin});

  right: 16px;
  // top: $header-height;
  bottom: $bottom-margin;
  // padding: 0 8px 8px; // room for shadow

  font-size: 14px;

  z-index: $modal-z-index;

  &.dismissing {
    animation: exitRight $animationTime ease-in-out forwards;
  }
}

.actions {
  flex: none;

  padding: 0 8px;
}

.notificationsContainer {
  display: flex;
  flex-direction: column-reverse;
  margin-bottom: 4px;
  padding: 8px 8px 4px;

  overflow-x: hidden;
  overflow-y: auto;

  > * {
    flex: none;
  }

  > :not(:first-child) {
    margin-bottom: 4px;
  }
}

.timestamp {
  font-size: 0.85em;
  text-align: right;
}

@keyframes exitRight {
  0% {
    transform: translate(0%, 0);
    opacity: 1;
  }

  99% {
    transform: translate(200%, 0);
    opacity: 0;
  }
  100% {
    transform: translate(200%, 0);
    opacity: 0;
    visibility: hidden;
  }
}

:export {
  animationTime: $animationTime / 1ms;
}
